<script setup lang="ts">
import LikeList from '@/components/LikeList.vue';


</script>



<template>
    <div class="header">

        <!-- 路由出口 -->
        <!-- <router-view></router-view> -->

        <!-- 头部展示栏 -->
        <!-- <div class="box1">
              <h2>我的</h2>
              <van-button icon="service-o" type="primary" class="box1-button" />
            </div> -->
        <van-nav-bar class="box1" z-index="99" fixed: boolean="true" title="我的">
            <van-button icon="service-o" type="primary" class="box1-button" />
        </van-nav-bar>

        <!-- 用户信息展示组件 -->
        <div class="box2">
            <div class="box2-1">
                <div class="box2-imgbox"></div>
                <p>
                    <span>不熬夜工作室</span> <br />
                    <span> 账户ID: XXXX </span>
                </p>
            </div>
            <van-icon name="arrow" />
        </div>

        <!-- 零碎组件 -->
        <div class="box3">
            <!-- 我的订单 -->
            <div class="box3-1">
                <p>我的订单</p>
                <p @click="$router.push('/wode/myorder')">全部订单</p>
            </div>
            <van-grid :column-num="4">
                <van-grid-item icon="home-o" text="待付款" dot />
                <van-grid-item icon="search" text="待收货" badge="99+" />
                <van-grid-item icon="search" text="退款/售后" badge="99+" />
                <van-grid-item icon="search" text="已收货" badge="99+" />
            </van-grid>


            <!-- 我的功能 -->
            <div class="box3-2">
                <p>我的功能</p>
            </div>
            <van-grid :column-num="4">
                <van-grid-item icon="home-o" text="优惠卷" dot />
                <van-grid-item icon="search" text="我的收藏" badge="99+" />
                <van-grid-item icon="search" text="地址管理" badge="99+" />
                <van-grid-item icon="search" text="官方客服" badge="99+" />
            </van-grid>


            <!-- 猜你喜欢 -->
            <div class="box4">
                <h3> 猜你喜欢 </h3>
                <LikeList></LikeList>
            </div>




        </div>
    </div>
</template>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.box1 {
    background-color: rgb(173, 224, 229);
    position: relative;
}

.box1-button {
    position: absolute;
    right: 10px;
    height: 30px;
}

.box2 {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(173, 224, 229);

    .box2-1 {
        margin-left: 50px;
        display: flex;
        align-items: center;

        p {
            line-height: 20px;
            margin-left: 10px;
        }
    }

    .box2-imgbox {
        width: 80px;
        height: 80px;
        background-color: red;
        border-radius: 50%;
    }

    .van-icon {
        margin-right: 20px;
    }
}

/* 我的订单组件样式 */
.box3 {
    width: 90%;
    background-color: white;
    margin: auto;

    .box3-1 {
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    // 我的功能样式
    .box3-2 {
        margin-top: 20px;
        height: 30px;
        line-height: 30px;
    }

    /* 猜你喜欢样式 */
    .box4 {
        margin-top: 20px;
        height: 30px;
        text-align: center;
    }
}
</style>